﻿<template>
  <div class="designer-auth">
    <el-steps :active="active" simple process-status="wait">
      <el-step
          title="资料上传"
          icon="el-icon-edit"
          description="填写企业信息"
      ></el-step>
      <el-step
          title="平台审核"
          icon="el-icon-money"
          description="平台确认中"
      ></el-step>
      <el-step
          title="认证成功"
          icon="el-icon-s-check"
          description="认证中心"
      ></el-step>
    </el-steps>
    <div v-if="active === 1" v-loading="loading">
      <el-form
          :model="formData"
          ref="enterpriseForm"
          :disabled="formDataDisabled"
          :rules="rules"
          size="small"
          :inline="true"
          label-width="68px"
          label-position="left"
      >
        <el-divider content-position="left">企业信息</el-divider>
        <el-form-item label="公司名称" prop="name" label-width="80px">
          <el-input
              v-model="formData.name"
              placeholder="请输入公司名称（请与营业执照信息保持一致）"
              clearable></el-input>
        </el-form-item>
        <el-form-item label="联系人" label-width="70px" prop="contact">
          <el-input
              v-model="formData.contact"
              placeholder="请输入企业联系人"
              clearable>
          </el-input>
        </el-form-item>
        <el-form-item
            label="联系方式"
            label-width="80px"
            prop="contactNumber">
          <el-input
              v-model="formData.contactNumber"
              placeholder="请输入企业联系方式"
              clearable></el-input>
        </el-form-item><br />
        <el-form-item label="公司地址" prop="address" label-width="80px">
          <el-input
              type="textarea"
              v-model="formData.address"
              placeholder="请输入公司地址（请与营业执照信息保持一致）"
              clearable
              style="width: 800px"
          ></el-input>
        </el-form-item>
        <el-divider content-position="left">证件信息</el-divider>
        <el-form-item label="证件类型" label-width="80px" prop="idType">
          <el-select
              v-model="formData.idType"
              placeholder="请选择证件类型"
              clearable
          >
            <el-option
                v-for="(item, index) in idTypeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
            label="信用代码"
            prop="socialCreditCode"
            label-width="80px"
        >
          <el-input
              v-model="formData.socialCreditCode"
              placeholder="请输入社会信用代码"
              clearable
          ></el-input> </el-form-item>
        <el-form-item
            label="营业执照"
            label-width="80px"
            prop="businessLicensePhoto"
        >
          <image-upload
              :limit="1"
              :fileSize="fileSize"
              class="idCord"
              :uploadImgUrl="uploadImgUrl"
              v-model="formData.businessLicensePhoto"
          />
        </el-form-item>
        <el-divider content-position="left">法定代表人信息</el-divider>
        <el-form-item
            label="法定代表人姓名"
            label-width="125px"
            prop="legalRepresentativeName"
        >
          <el-input
              v-model="formData.legalRepresentativeName"
              placeholder="请输入法定代表人姓名"
              clearable
          ></el-input>
        </el-form-item>
        <el-form-item
            label="法定代表人身份证号"
            label-width="150px"
            prop="idNumber"
        >
          <el-input
              v-model="formData.idNumber"
              placeholder="请输入法定代表人身份证号"
              clearable
          ></el-input> </el-form-item
        ><br />
        <el-form-item
            label="法人身份证(国徽面)"
            label-width="160px"
            prop="idPhoto0">
          <image-upload
              :limit="1"
              :fileSize="fileSize"
              class="idCord"
              :uploadImgUrl="uploadImgUrl"
              v-model="formData.idPhoto0"
          />
        </el-form-item>
        <el-form-item
            label="法人身份证(人像面)"
            label-width="160px"
            prop="idPhoto1">
          <image-upload
              :limit="1"
              class="idCord"
              :fileSize="fileSize"
              :uploadImgUrl="uploadImgUrl"
              v-model="formData.idPhoto1"
          />
        </el-form-item>
        <el-divider content-position="left">银行信息</el-divider>
        <el-form-item
            label="银行账号"
            label-width="80px"
            prop="bankAccountNumber"
        >
          <el-input
              v-model="formData.bankAccountNumber"
              placeholder="请输入开户银行账号"
              clearable
          ></el-input>
        </el-form-item>
        <el-form-item
            label="银行名称"
            label-width="80px"
            prop="bankAccountName"
        >
          <el-select
              v-model="formData.bankAccountName"
              clearable
              filterable
              placeholder="请选择开户银行"
          >
            <el-option
                v-for="item in bankOptions"
                :key="item.id"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
            label="支行名称"
            label-width="80px"
            prop="bankAccountBranchName"
        >
          <el-input
              v-model="formData.bankAccountBranchName"
              placeholder="请输入开户银行支行名称"
              clearable
          ></el-input>
        </el-form-item>
        <el-divider content-position="left">企业类别</el-divider>
        <el-form-item
            label="企业类别"
            label-width="80px"
            prop="enterpriseType"
        >
          <el-radio-group v-model="formData.enterpriseType" size="medium">
            <el-radio
                v-for="(item, index) in enterpriseTypeOptions"
                :key="index"
                :label="item.value"
                :title="item.description"
            >{{ item.label }}</el-radio
            >
          </el-radio-group> </el-form-item
        ><br />
        <el-form-item
            label="企业主营品类"
            prop="mainBusinessTypeId"
            label-width="110px"
        >
          <el-radio-group v-model="formData.mainBusinessTypeId" size="medium">
            <el-radio
                v-for="(item, index) in mainBusinessTypeOptions"
                :key="index"
                :label="item.id"
                :title="item.description"
            >{{ item.name }}</el-radio
            >
          </el-radio-group> </el-form-item
        ><br />
        <el-form-item
            label="补充企业主营品类"
            v-show="formData.mainBusinessTypeId == 0"
            label-width="130px"
        >
          <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入设计风格"
              v-model="formData.mainBusinessType"
              style="width: 300px"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button
            size="small"
            v-if="!formDataDisabled"
            @click="submitForm"
        >提交认证</el-button>
        <el-button
            size="small"
            v-if="formDataDisabled"
            @click="() => (active = 2)"
        >下一页</el-button
        >
      </div>
    </div>
    <div v-if="active === 2" v-loading="loading">
      <el-result icon="success" title="成功提示" subTitle="资料上传成功，平台确认中！！！">
      </el-result>
      <div style="text-align: center; margin-top: 10px">
        <el-button size="small" @click="preSubmit">查看提交信息</el-button>
      </div>
    </div>
    <div v-if="active === 3">
      <div class="auth-notice">
        <auth-notice></auth-notice>
      </div>
      <div style="text-align: center; margin-top: 10px">
        <el-button size="small" @click="preSubmit">查看提交信息</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {metadataMixin} from "@/utils/metadata";
import ImageUpload from "@/components/ImageUpload";
import {getAuthInfo, submitAuth} from "@/api/user";
import AuthNotice from "@/views/person/auth/components/AuthNotice";
import {listBank, listEnterpriseMainBusinessType} from "@/api/metadata";


export default {
  name: "EnterpriseAuth",
  components: {AuthNotice, ImageUpload},
  data() {
    return {
      // 认证状态及其原因
      loading: false,
      formDataDisabled: false,
      active: 1,
      fileSize: 10,
      other: false,
      formData: {
        // 企业信息
        name: undefined,
        address: undefined,
        contact: undefined,
        contactNumber: undefined,
        // 证件类型
        idType: 0,
        socialCreditCode: undefined,
        organizationCode: undefined,
        businessLicensePhoto: undefined,
        // 法人
        legalRepresentativeName: undefined,
        idNumber: undefined,
        idPhoto0: undefined,
        idPhoto1: undefined,
        // 银行
        bankAccountNumber: undefined,
        bankAccountName: undefined,
        bankAccountBranchName: undefined,
        // 企业类型
        enterpriseType: undefined,
        mainBusinessTypeId: undefined,
        mainBusinessType: undefined,
        // 表单状态信息
        status: undefined,
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入公司名称（请与营业执照信息保持一致）",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入公司地址（请与营业执照信息保持一致）",
            trigger: "blur",
          },
        ],
        contact: [
          {
            required: true,
            message: "请输入企业联系人",
            trigger: "blur",
          },
        ],
        contactNumber: [
          {
            required: true,
            message: "请输入企业联系方式",
            trigger: "blur",
          },
          {
            pattern:
                /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
            message: "请输入正确的联系方式",
            trigger: "blur",
          },
        ],
        idType: [
          {
            required: true,
            message: "请选择证件类型",
            trigger: "change",
          },
        ],
        socialCreditCode: [
          {
            required: true,
            message: "请输入社会信用代码",
            trigger: "blur",
          },
          {
            pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
            message: "请输入正确的社会信用代码",
            trigger: "blur",
          },
        ],
        organizationCode: [
          {
            required: true,
            message: "请输入组织机构代码",
            trigger: "blur",
          },
        ],
        businessLicensePhoto: [
          {
            required: true,
            message: "请上传营业执照",
            trigger: "blur",
          },
        ],
        legalRepresentativeName: [
          {
            required: true,
            message: "请输入法定代表人姓名",
            trigger: "blur",
          },
        ],
        idNumber: [
          {
            required: true,
            message: "请输入法定代表人身份证号",
            trigger: "blur",
          },
          {
            pattern:
                /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/,
            message: "请输入正确的身份证",
            trigger: "blur",
          },
        ],
        idPhoto0: [
          {
            required: true,
            message: "请上传身份证正面照片",
            trigger: "blur",
          },
        ],
        idPhoto1: [
          {
            required: true,
            message: "请上传身份证国徽面照片",
            trigger: "blur",
          },
        ],
        bankAccountNumber: [
          {
            required: true,
            message: "请输入开户银行账号",
            trigger: "blur",
          },
        ],
        bankAccountName: [
          {
            required: true,
            message: "请输入开户银行名称",
            trigger: "blur",
          },
        ],
        bankAccountBranchName: [
          {
            required: true,
            message: "请输入开户银行支行名称",
            trigger: "blur",
          },
        ],
        enterpriseType: [
          {
            required: true,
            message: "请选择企业类别",
            trigger: "change",
          },
        ],
        mainBusinessTypeId: [
          {
            required: true,
            message: "请选择企业主营业务",
            trigger: "change",
          },
        ],
      },
      bankOptions: [],
      idTypeOptions: [
        {
          label: "社会统一信用码",
          value: 0,
        },
        {
          label: "组织机构代码",
          value: 1,
        },
      ],
      enterpriseTypeOptions: [
        {
          label: "外贸",
          value: 1,
        },
        {
          label: "内贸",
          value: 2,
        },
      ],
      mainBusinessTypeOptions: [],
      authType: 3,
      authLogs: [],
    };
  },
  mixins: [metadataMixin],
  created() {
    this.getBankList()
    this.getEnterpriseMainBusinessTypeList()
    this.getEnterpriseInfo();
  },
  methods: {
    getBankList() {
      listBank().then((res) => {
        this.bankOptions = res;
      });
    },
    getEnterpriseMainBusinessTypeList() {
      listEnterpriseMainBusinessType().then((res) => {
        this.mainBusinessTypeOptions = res;
        this.mainBusinessTypeOptions.push({
          id: 0,
          name: "其他",
          description: "其他",
        });
      });
    },
    preSubmit() {
      this.active = 1;
      this.formDataDisabled = true;
    },
    preEdit() {
      this.active = 1;
      this.formDataDisabled = false;
    },
    //初始化认证数据
    getEnterpriseInfo() {
      this.active = 1;
      this.loading = true;
      getAuthInfo(this.authType).then(res=>{
        if(res){
          this.active = 2;
          let r1 = JSON.parse(res.examineJson)
          this.formData = r1
        }
        this.loading = false;
      })


    },
    //提交数据
    submitForm() {
      this.loading = true;
      this.$refs["enterpriseForm"].validate(async (valid) => {
        if (!valid) {
          this.$message.error("表单校验失败！");
          this.loading = false;
          return;
        }

        submitAuth(this.authType,this.formData)
            .then((res) => {
              this.loading = false;
              if(res){
                this.$message.success("认证申请提交成功！！！");
              }
            }).catch(() => {
          this.loading = false;
        });
      });
    },
  },
}
</script>

<style lang='scss' scoped>
.designer-auth {

}
::v-deep .el-upload--picture-card {
  width: 280px;
}
.idCord ::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 232px;
}
.enterprise-form {
  width: 700px;
  margin-left: 10px;
  .form-title {
    background-color: aqua;
  }
}
> .el-step__title.is-finish {
  color: #f5db90 !important;
}
.experience {
  width: 85px;
  display: inline-block;
  padding-left: 8px;
  font-weight: bolder;
  margin-right: 12px;
}
.experience:before {
  content: "*";
  color: #ff4949;
  margin-right: 4px;
}
</style>
